import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/api/curriculum/curriculum_model.dart';
import '../../../core/providers/curriculum_provider.dart';
import '../../../shared/widgets/glass_card.dart';
import '../../../shared/widgets/aurora_background.dart';
import '../../../shared/utils/responsive_utils.dart';

class KnowledgePointsPage extends ConsumerWidget {
  final String chapterId;
  final String chapterTitle;

  const KnowledgePointsPage({
    super.key,
    required this.chapterId,
    required this.chapterTitle,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final knowledgePoints = ref.watch(
      knowledgePointsByChapterProvider(chapterId),
    );

    return Scaffold(
      appBar: AppBar(title: Text(chapterTitle)),
      body: Stack(
        children: [
          const AuroraBackground(),
          _buildBody(context, knowledgePoints),
        ],
      ),
    );
  }

  Widget _buildBody(
    BuildContext context,
    List<KnowledgePoint> knowledgePoints,
  ) {
    if (knowledgePoints.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.lightbulb_outline,
              size: ResponsiveUtils.getResponsiveIconSize(context, 64),
              color: Colors.grey,
            ),
            SizedBox(height: ResponsiveUtils.getResponsiveSpacing(context, 16)),
            Text(
              '暂无知识点',
              style: TextStyle(
                fontSize: ResponsiveUtils.getResponsiveFontSize(context, 18),
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: ResponsiveUtils.getResponsiveSpacing(context, 8)),
            Text('该章节暂无知识点内容', style: TextStyle(color: Colors.grey)),
          ],
        ),
      );
    }

    return ListView.builder(
      padding: EdgeInsets.all(
        ResponsiveUtils.getResponsiveSpacing(context, 16),
      ),
      itemCount: knowledgePoints.length,
      itemBuilder: (context, index) {
        final knowledgePoint = knowledgePoints[index];
        return _KnowledgePointCard(knowledgePoint: knowledgePoint);
      },
    );
  }
}

class _KnowledgePointCard extends StatelessWidget {
  final KnowledgePoint knowledgePoint;

  const _KnowledgePointCard({required this.knowledgePoint});

  @override
  Widget build(BuildContext context) {
    final ColorScheme cs = Theme.of(context).colorScheme;

    return GlassCard(
      child: Padding(
        padding: EdgeInsets.all(
          ResponsiveUtils.getResponsiveSpacing(context, 16),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  width: ResponsiveUtils.getResponsiveIconSize(context, 32),
                  height: ResponsiveUtils.getResponsiveIconSize(context, 32),
                  decoration: BoxDecoration(
                    color: Color(
                      knowledgePoint.difficultyColor,
                    ).withOpacity(0.2),
                    borderRadius: BorderRadius.circular(
                      ResponsiveUtils.getResponsiveRadius(context, 16),
                    ),
                  ),
                  child: Icon(
                    Icons.lightbulb,
                    color: Color(knowledgePoint.difficultyColor),
                    size: ResponsiveUtils.getResponsiveIconSize(context, 18),
                  ),
                ),
                SizedBox(
                  width: ResponsiveUtils.getResponsiveSpacing(context, 12),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        knowledgePoint.title,
                        style: Theme.of(context).textTheme.titleMedium
                            ?.copyWith(fontWeight: FontWeight.bold),
                      ),
                      SizedBox(
                        height: ResponsiveUtils.getResponsiveSpacing(
                          context,
                          4,
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: ResponsiveUtils.getResponsiveSpacing(
                            context,
                            8,
                          ),
                          vertical: ResponsiveUtils.getResponsiveSpacing(
                            context,
                            2,
                          ),
                        ),
                        decoration: BoxDecoration(
                          color: Color(
                            knowledgePoint.difficultyColor,
                          ).withOpacity(0.1),
                          borderRadius: BorderRadius.circular(
                            ResponsiveUtils.getResponsiveRadius(context, 8),
                          ),
                        ),
                        child: Text(
                          knowledgePoint.difficultyText,
                          style: Theme.of(
                            context,
                          ).textTheme.labelSmall?.copyWith(
                            color: Color(knowledgePoint.difficultyColor),
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Text(
                  '#${knowledgePoint.order}',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: cs.onSurface.withOpacity(0.5),
                  ),
                ),
              ],
            ),

            SizedBox(height: ResponsiveUtils.getResponsiveSpacing(context, 12)),

            Text(
              knowledgePoint.description,
              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                color: cs.onSurface.withOpacity(0.8),
                height: 1.5,
              ),
            ),

            if (knowledgePoint.tags != null &&
                knowledgePoint.tags!.isNotEmpty) ...[
              SizedBox(
                height: ResponsiveUtils.getResponsiveSpacing(context, 12),
              ),
              Wrap(
                spacing: ResponsiveUtils.getResponsiveSpacing(context, 6),
                runSpacing: ResponsiveUtils.getResponsiveSpacing(context, 6),
                children:
                    knowledgePoint.tags!
                        .map(
                          (tag) => Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: ResponsiveUtils.getResponsiveSpacing(
                                context,
                                8,
                              ),
                              vertical: ResponsiveUtils.getResponsiveSpacing(
                                context,
                                4,
                              ),
                            ),
                            decoration: BoxDecoration(
                              color: cs.secondaryContainer,
                              borderRadius: BorderRadius.circular(
                                ResponsiveUtils.getResponsiveRadius(
                                  context,
                                  12,
                                ),
                              ),
                            ),
                            child: Text(
                              tag,
                              style: TextStyle(
                                fontSize: ResponsiveUtils.getResponsiveFontSize(
                                  context,
                                  11,
                                ),
                                color: cs.onSecondaryContainer,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        )
                        .toList(),
              ),
            ],

            SizedBox(height: ResponsiveUtils.getResponsiveSpacing(context, 16)),

            Row(
              children: [
                Expanded(
                  child: OutlinedButton.icon(
                    onPressed: () {
                      // TODO: 开始练习这个知识点
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('开始练习：${knowledgePoint.title}')),
                      );
                    },
                    icon: Icon(
                      Icons.play_arrow,
                      size: ResponsiveUtils.getResponsiveIconSize(context, 18),
                    ),
                    label: const Text('开始练习'),
                  ),
                ),
                SizedBox(
                  width: ResponsiveUtils.getResponsiveSpacing(context, 12),
                ),
                Expanded(
                  child: ElevatedButton.icon(
                    onPressed: () {
                      // TODO: 查看详细讲解
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('查看讲解：${knowledgePoint.title}')),
                      );
                    },
                    icon: Icon(
                      Icons.info_outline,
                      size: ResponsiveUtils.getResponsiveIconSize(context, 18),
                    ),
                    label: const Text('详细讲解'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
